<template>
  <div class="annual-page-index">
    <!-- 页面标题 -->
    <div class="box-content">
         <div class="main-title">年度计划</div>
         <div class="add-btn" @click="annualAdd" v-hasPermi="['web:plan:add']">
            <img src="../../assets/images/icon_from_add.png" alt="">年度项目计划
         </div>
        <div class="table-box">
          <el-table
              :data="tableData"
              border
              v-loading="loading"
              empty-text="暂无数据"
              :min-height="450"
              style="width: 100%">
              <el-table-column
              type="index"
              label="序号">
              </el-table-column>
              <el-table-column
                v-for="(item,index) in tableColumn"
                :key="index"
                :label="item.label"
                :prop="item.prop"
              >
              <template slot-scope="scope">
                {{scope.row[item.prop]==null||scope.row[item.prop]==undefined ? 0:scope.row[item.prop]}}
              </template>
              </el-table-column>
              <el-table-column
              prop="isState"
              label="状态">
              <template slot-scope="scope">
                  <div class="state-span">
                    <span v-if="scope.row.isState!=''" :class="['out-line',{'out-line1':scope.row.isState=='45'},{'out-line2':scope.row.isState=='47'}]"><span></span></span>
                      {{scope.row.isState=='43'?'未启动':
                      scope.row.isState=='44'?'正在申报':
                      scope.row.isState=='45'?'已暂停':
                      scope.row.isState=='46'?'待审核':
                      scope.row.isState=='47'?'已审核':''}}
                  </div>
              </template>
              </el-table-column>
              <el-table-column
              label="操作">
              <template slot-scope="scope">
                  <el-button v-if="scope.row.isState=='47'||scope.row.isState=='44'"  @click="handleClick(scope.row,'look')" type="text" size="small">查看</el-button>
                  <el-button v-if="scope.row.isState=='43'||scope.row.isState=='45'" @click="handleClick(scope.row,'edit')" type="text" size="small" v-hasPermi="['web:plan:edit']">编辑</el-button>
                  <el-button v-if="scope.row.isState=='43'" type="text" size="small" @click="handleDelete(scope.row,'del')" v-hasPermi="['web:plan:remove']">删除</el-button>
                  <!-- <el-button v-if="scope.row.isState=='44'"  type="text" size="small" @click="handleClick(scope.row,'stop')">暂停</el-button> -->
                  <el-button v-if="scope.row.isState=='44'" type="text" size="small" @click="handleDelete(scope.row,'stop')" v-hasPermi="['web:plan:stop']">暂停</el-button>
                  <el-button v-if="scope.row.isState=='45'" type="text" size="small" @click="handleDelete(scope.row,'start')" v-hasPermi="['web:plan:start']">启动</el-button>
                  <el-button v-if="scope.row.isState=='46'" type="text" size="small" @click="handleClick(scope.row,'audit')">审核 </el-button>
                  <el-button v-if="scope.row.isState=='44'" type="text" size="small" @click="handleDelete(scope.row,'termination')" v-hasPermi="['web:plan:terminateAnnualPlan']">终止 </el-button>
              </template>
              </el-table-column>
          </el-table>

        </div>
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="queryForm.pageSize"
          >
        </el-pagination>
        <el-dialog
            :title="title"
            :visible.sync="showDialog"
            width="628px"
            :before-close="handleClose"
            top="12">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :validate-on-rule-change='false' label-width="118px" class="demo-ruleForm" width="100%">
                <el-form-item label="计划名称" prop="name" v-if="type=='add'||type=='edit'">
                    <el-input v-model="ruleForm.name" maxlength="32"></el-input>
                </el-form-item>
                <el-form-item label="年度" prop="year"  v-if="type=='add'||type=='edit'">
                    <el-select v-model="ruleForm.year" placeholder="请选年度">
                    <el-option v-for="(item,index) in yearArr" :label="item.key" :value="item.value" :key="index"></el-option>
                    <!-- <el-option label="区域二" value="beijing"></el-option> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="开放起始时间" prop="startTime" v-if="type=='add'||type=='edit'">
                    <el-date-picker placeholder="选择时间" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.startTime"  style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="开放截止时间" prop="endTime" v-if="type=='add'||type=='edit'">
                    <el-date-picker placeholder="选择时间"  type="datetime" value-format="yyyy-MM-dd HH:mm:ss" @change="checkEnd" v-model="ruleForm.endTime"  style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="审核结果"  required  v-if="type=='audit'">
                    <el-select v-model="ruleForm.region" placeholder="">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="审核意见"  required  v-if="type=='audit'">
                    <el-input type="textarea" v-model="ruleForm.k"></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="计划名称" required  v-if="type=='stop'">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="专家审批结论" required  v-if="type=='results'">
                    <el-input v-model="ruleForm.j"></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="抽取类型" v-if="type=='addRules'||type=='editRules'" required>
                    <el-select v-model="ruleForm.region" placeholder="">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item> -->
                <!-- <el-form-item label="专家数量" v-if="type=='addRules'||type=='editRules'" required>
                    <el-select v-model="ruleForm.region" placeholder="">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item> -->
            </el-form>
            <!-- <div class="del-box" v-if="type=='del'">
                <img src="../../assets/images/icon_form_error.png" alt=""> 是否确定删除 ？
            </div>
            <div class="del-box" v-if="type=='stop'">
                <img src="../../assets/images/icon_form_error.png" alt=""> 是否确定暂停 ？
            </div>
            <div class="del-box" v-if="type=='start'">
                <img src="../../assets/images/icon_form_error.png" alt=""> 是否确定启动 ？
            </div> -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
  </div>
</template>

<script>
// import EditDialog from './components/editDialog'
import {getAnnualist,getAddPlan,getYear,getListingDetail,getEditPlan,getUpdateStag,getDelete,terminatePlan} from '../../api/manage/annualPlan'
export default {
  name:'annual',
  // components:{
  //   EditDialog
  // },
  data() {
    var valiStart = (rule, value, callback) => {
      console.log(value,'开始时间的值')
        if (value == ''|| value==undefined ) {
          callback(new Error('请选择开始时间'));
        } else {
          if(this.ruleForm.endTime !=undefined&&this.ruleForm.endTime != ''){
            if (this.ruleForm.endTime < value) {
                callback(new Error('请选择正确的开始时间'));
              // this.$refs.ruleForm.clearValidate();
            }
          }
          callback();
          
        }
      };
    var valiEnd = (rule, value, callback) => {
        if (value == ''|| value==undefined) {
          callback(new Error('请选择结束时间'));
        } else {
          if(this.ruleForm.startTime>value){
            callback(new Error('请选择正确的结束时间'));
          }else{
            // if (this.ruleForm.checkPass !== '') {
              // this.$refs.ruleFormRf.clearValidate();
            // }
            callback();
          }
        }
      };
    return {
       rules:{
          name:[
              {required: true, message: '请输入计划名称', trigger: 'blur' }
          ],
          year:[
              {required: true, message: '请选择年份', trigger: 'change' }
          ],
          startTime:[
              {type:'date',required: true, validator: valiStart, trigger: ['change','blur'] }
          ],
          endTime:[
              {type:'date',required: true,validator: valiEnd, trigger: ['change','blur'] }
          ],
      },
      // 查询参数
      queryForm: {
        pageSize: 10,
        pageNum: 1
      },
      showDialog:false,
      type:'add',
      loading:false,
      tableData:[

      ],
      queryFormRules: {},
      // 列表Tabs
      listType: "all",
      approveFlag: false,
      tableColumn:[
        {label:'计划名称',prop:'name'},
        {label:'年份',prop:'year'},
        {label:'项目单位数量',prop:'numberProjectUnits'},
        {label:'项目数量',prop:'numberItems'},
        {label:'投资估算(万元)',prop:'totalInvestmentEstimation'},
        {label:'起始时间',prop:'startTime'},
        {label:'截止时间',prop:'endTime'},
        // {label:'项目节点',prop:'i'},
      ],
      total:0,
      proid:'',
      ruleForm:{
        name:'',
        year:'',
        startTime:'',
        endTime:'',
      },
      yearArr:[],
      title:'年度项目清单计划'
    };
  },
  created() {
    this.getList()
  },
  watch:{
    showDialog(val){
        // this.$refs['ruleFormRf'].clearValidate()
        if(val){
            if(this.type=='add'||this.type=='edit'){
                // this.$refs.ruleFormRf.clearValidate()
                getYear().then(res =>{
                    if(res.code==200){
                      console.log(res)
                        this.yearArr=res.year
                        this.title="年度项目清单计划"
                    }
                })
            }else if(this.type=='stop'){
                this.title="暂停"
            }else if(this.type=='start'){
                this.title="启动"
            }else{
                this.totle='年度项目审核'
            }

            if(this.type=='edit'){
                getListingDetail(this.proid).then(res =>{
                    this.ruleForm={
                        'name':res.name,
                        'year':res.year,
                        'startTime':res.startTime,
                        'endTime':res.endTime
                    }
                })
            }
        }
    },
  },
  methods: {
    /** 删除按钮操作 */
    handleDelete(row,type) {
      // this.ruleForm.projectId=this.proid
      console.log(row)
      this.proid = row.planId;
      if(type=='del'){
        this.$confirm("是否确认删除 ？", "删除", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          customClass: "del_box",
        }).then(() =>{
            // return delRole(roleIds);
            this.getDeleteList()
        })
      }else if(type=='stop'){
         this.$confirm("是否确认暂停 ？", "暂停", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          customClass: "del_box",
        }).then(() =>{
            // return delRole(roleIds);
            this.getStutsChange()
        })
      }else if(type=='termination'){
        this.$confirm("是否确认终止 ？", "终止", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          customClass: "del_box",
        }).then((code) =>{
          if (code === 'confirm') {
            terminatePlan(row.planId).then(res => {
              if (res.code === 200) {
                this.$message.success('操作成功')
                this.getList();
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        })
      }
      else{
        this.$confirm("是否确认启动 ？", "启动", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          customClass: "del_box",
        }).then(() =>{
            // return delRole(roleIds);
            this.getStutsChange()
        })
      }
    },
    handleClick(val,type){
      if(type=='look'||type=='audit'){
        console.log(this.$router)
        this.$router.push('/business_manage/manage/annualplan/annualProjectPlan?id='+ val.planId + '&type='+val.isState)
      }else{
        this.type=type
        this.proid=val.planId
        this.showDialog=true
      }
    },
    getList(){
      console.log(this.queryForm)
      getAnnualist(this.queryForm).then(res =>{
        console.log(res,'年度计划数据')
        if(res.code==200){
          this.tableData=res.rows
          this.total=res.total
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryForm.pageSize=val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryForm.pageNum=val
      this.getList()
    },
    annualAdd(){
          // if(this.type=='add'){
          
          // console.log(this.$refs.ruleFormRf)
          // this.$refs.ruleForm.$refs.ruleFormRf.clearValidate()
          // console.log(this.$refs.ruleForm.$refs.ruleFormRf)
        // }
      this.type='add'
      this.showDialog=true
    },
    submitForm() {
        this.ruleForm.projectId=this.proid
        let TYPE=this.type
        this.$refs['ruleForm'].validate((valid) => {
            if(valid){
              if(TYPE=='add'){
                  this.getPlanAdd()
              }else if(TYPE=='edit'){
                  this.getPlanEdit()
              }else if(TYPE=='start'||TYPE=='stop'){
                  this.getStutsChange()
              }else if(TYPE=='del'){
                  this.getDeleteList()
              }
            }
        })
        // this.resetForm()
        
    },
    //新增项目
    getPlanAdd(){
        getAddPlan(this.ruleForm).then(res =>{
          console.log(res)
          if(res.code==500){
            this.$message.error(res.msg)
            console.log('错误了')
          }else{
            this.showDialog=false
            this.$refs.ruleForm.resetFields()
            setTimeout(() =>{
              this.getList()
            },1000)
          }
        })
    },
    //修改项目
    getPlanEdit(){
        // this.ruleForm.planId=this.proid
        getEditPlan(this.proid,this.ruleForm).then(res =>{
          setTimeout(() =>{
            this.showDialog=false
            this.getList()
            this.$refs.ruleFormRf.resetFields()
          },1000)
        })
    },
    //修改状态，启动<=>暂停
    getStutsChange(){
        getUpdateStag(this.proid).then(res =>{
          // this.showDialog=false
          this.getList();
        }) 
    },
    //删除项目
    getDeleteList(){
        getDelete(this.proid).then(res =>{
            this.$message("删除成功");
            this.getList();
          // this.showDialog=false
        })
    },
    //关闭
    handleClose(){
      this.showDialog=false
      this.$refs.ruleForm.resetFields()
    },
    checkEnd(val){
    //   console.log(val<this.ruleForm.startTime)
    //   console.log(this.ruleForm.startTime)
    //   console.log(this.ruleForm.endTime)
    //   let start=this.ruleForm.startTime
    //   let end=this.ruleForm.endTime
    //   if((val<start)||(start<end)){
    //     this.ruleForm.endTime=''
    //     this.$message.error('请选择正确的时间');
    //   }
    }
  }
};
</script>

<style lang="scss" scoped>
.annual-page-index{
  width: 100%;
  padding:16px;
  height: 100%;
  background:#f5f5f5;
  .container-box{
    width: 1688px;
    background:#FFF;
   
  }
   .main-title{
        font-size: 18px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        color: #000000;
        line-height: 18px;
        padding:24px
    }
  .box-content{
    background:#fff;
    margin-top:10px;
    padding-bottom:40px;
    .table-box{
      // margin:25px 0;
      // width:1600px;
      padding: 0 24px;

      .state-span{
        display: flex;
        align-items: center;
        .out-line{
          display: inline-block;
          width: 16px;
          height: 16px;
          // opacity: 0.1;
          background: rgba(49,113,238,0.1);
          border-radius: 16px;
          margin-right:10px;
          span{
            margin:4px;
            width: 8px;
            height: 8px;
            background: #3171ee;
            border-radius: 16px;
            display: inline-block;
          }
        }
        .out-line1{
           background: rgba(223,32,66,0.1);
           span{
             background:#df2042;
           }
        }
        .out-line2{
           background: rgba(51,168,61,0.1);
           span{
             background:#33A83D;
           }
        }
      }
    }
    .el-pagination{
      text-align: center;
      margin-top:40px;
    }
  }
}
.number-box {
  display: flex;
  width: 218px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
}
.rule-input {
  border: 0 !important;
}
.add-btn{
    width: 138px;
    height: 32px;
    background: #3171ee;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    color:#fff;
    display: flex;
    align-items:center;
    margin:0 0  24px 24px;
    cursor:pointer;
    img{
        margin:0 7px 0 17px;
        width:14px;
        height:14px;
    }
}

</style>
<style  lang="scss">
.annual-page-index .el-dialog{
  display: flex;
  flex-direction: column;
  margin:0 !important;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  /*height:600px;*/
//   max-height:calc(100% - 30px);
  max-width:calc(100% - 30px);
}
.annual-page-index .el-dialog .el-dialog__body{
  flex:1;
  overflow: auto;
}
.annual-page-index .el-form-item .el-input__inner{
    width:400px;
}
.annual-page-index .el-textarea__inner{
     width:400px;
}
.annual-page-index .el-dialog__header{
    border-bottom:1px solid #ebecef;
}
.annual-page-index .el-dialog__footer{
    border-top:1px solid #ebecef;
}
.annual-page-index .el-form-item__content{
    width:400px;
}
.del_box {
  width: 345px;
  height: 175px;
  .el-message-box__headerbtn {
    background: url("../../assets/images/icon_dialog_close.png");
    background-size: 100%;
    width: 16px;
    height: 16px;
    .el-message-box__close {
      visibility: hidden;
    }
  }
  .el-message-box__content {
    padding: 26px 95px;
    font-size: 16px;
    .el-message-box__status.el-icon-warning{
      color: #EA4747;
    }
    .el-message-box__status + .el-message-box__message{
      padding-right: 0;
    }
  }
}
</style>

